<template>
  <div class="footer" id="footer">
    <div class="contentBox">
      <div class="topBox">
        <div class="intro">
          <p class="boxTitle">关于我们</p>
          <p class="boxText">
            <span @click="go_to_page01('公司介绍')">公司介绍</span>
          </p>
          <p class="boxText">
            <span @click="go_to_page01('联系我们')">联系我们</span>
          </p>
          <p class="boxText">
            <span @click="go_to_page01('服务条款')">服务条款</span>
          </p>
          <p class="boxText">
            <span @click="go_to_page01('隐私条款')">隐私条款</span>
          </p>
        </div>
        <div class="businessBox">
          <p class="boxTitle">商务投放合作</p>
          <p class="boxText">
            商务投放：赵女士
            <el-popover placement="right" trigger="hover" popper-class="popoverBox">
              <img src="@/assets/li/yingCode.png" class="codeImg" />
              <img src="../assets/li/codeShow.png" alt slot="reference" class="codeShow" />
            </el-popover>
          </p>
          <p class="boxText">
            数据定制：掌上精选小助手
            <el-popover placement="right" trigger="hover" popper-class="popoverBox">
              <img src="@/assets/img/xiaozhushou_qr.jpg" class="codeImg" />
              <img src="../assets/li/codeShow.png" alt slot="reference" class="codeShow" />
            </el-popover>
          </p>
          <p class="boxText">商务合作：anguannan@adzshd.com</p>
          <p class="boxText">品牌合作：zhaoyingying@adzshd.com</p>
        </div>
        <div class="rightBox">
          <div class="codeBox">
            <div>
              <img src="@/assets/li/zsjxSub.png" alt />
              <p class="boxText">掌上精选订阅号</p>
            </div>
            <div>
              <img src="@/assets/li/zsjxData.png" alt />
              <p class="boxText">掌上精选数据</p>
            </div>
            <div>
              <img src="@/assets/img/xiaozhushou_qr.jpg" alt />
              <p class="boxText">掌上精选小助手</p>
            </div>
          </div>
        </div>
      </div>
      <div class="bottomBox">
        <div class="bom">
          <p>
            <a href="http://www.adzshd.com/" target="_blank">掌上互动</a>
          </p>
          <p>
            <a href="http://www.xiaohanapp.com/" target="_blank">小涵兼职</a>
          </p>
          <p>
            <a href="https://www.zshd114.com/asaindex/" target="_blank">ASA智投平台</a>
          </p>
        </div>
        <div class="num">
          版权所有 CopyRight 2019-2020 掌上互动数据平台
          <a
            target="_blank"
            href="http://beian.miit.gov.cn/"
          >京ICP备15031574号-25</a>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {};
  },
  methods: {
    go_to_page01(parm) {
      // let str = `http://www.zsjx114.com/aboutUs?tabName=${parm}`
      let str = `./corporate?tabName=${parm}`;
      window.open(str, '_blank');
    }
  }
};
</script>

<style lang="less" scoped>
#footer {
  padding: 0 0 30px ;
  background: #202020;
  .contentBox {
    width: 1200px;
    height: 100%;

    margin: 0 auto;
    .topBox {
      display: flex;
      padding-top: 30px;
      .boxTitle {
        font-weight: 600;
        font-size: 14px;
        color: #ffffff;
        opacity: 1;
        line-height: 30px;
      }
      .boxText {
        font-size: 14px;
        cursor: pointer;
        color: #ffffff;
        opacity: 0.5;
        line-height: 30px;
      }
      .intro {
        margin-right: 250px;
      }
      .businessBox {
        margin-right: 132px;
        .boxText {
          cursor: auto;
        }
        .codeShow {
          opacity: 0.5;
          cursor: pointer;
          margin-left: 6px;
        }
        .codeShow:hover {
          opacity: 1;
        }
      }
      .rightBox {
        margin-top: 34px;
        .codeBox {
          display: flex;
          div {
            text-align: center;
            margin-right: 60px;
            img {
              width: 100px;
              height: 100px;
              margin-bottom: 6px;
            }
            p {
              font-size: 12px;
            }
          }
        }
      }
    }
    .bottomBox {
      .bom {
        text-align: center;
        p {
          display: inline-block;
          font-size: 12px;
          color: #ffffff;
          opacity: 0.5;
          padding-right: 30px;
          padding-left: 30px;
          margin-top: 30px;
          border-right: 1px solid #2d2f40;
          a {
            font-size: 12px;
            color: #ffffff;
            text-decoration: none;
          }
        }
        p:last-of-type {
          border-right: none;
        }
      }
      .num {
        margin-top: 11px;
        font-size: 12px;
        color: #ffffff;
        opacity: 0.2;
        text-align: center;
        a {
          color: #ffffff;
          text-decoration: none;
        }
      }
    }
  }
}
.codeImg {
  width: 120px;
  height: 120px;
}
</style>
<style >
.popoverBox {
  padding: 0 !important;
}
</style>